<template>
  <div class="home">
    <div class="container">
      <h1 class="title">{{ msg }},欢迎使用</h1>
      <div class="lead">
        <span>{{ message }}</span>
        <el-button size="mini" type="text" icon="el-icon-refresh" @click="loadSentence"></el-button>
      </div>

      <el-tag
        class="tag"
        v-for="(item,index) in tagList"
        :key="index"
        :type="item.type"
        effect="plain">
        {{ item.label }}
      </el-tag>
    </div>
  </div>
</template>

<script>
const TodayMsg = require('jinrishici')

export default {
  name: 'HomeView',
  data () {
    return {
      message: '',
      tagList: []
    }
  },
  computed: {
    msg () {
      const hour = new Date().getHours()
      if (hour < 6) return '凌晨好'
      if (hour < 9) return '早上好'
      if (hour < 12) return '上午好'
      if (hour < 14) return '中午好'
      if (hour < 17) return '下午好'
      if (hour < 19) return '傍晚好'
      if (hour < 22) return '晚上好'
      return '夜里好'
    }
  },
  methods: {
    loadSentence () {
      TodayMsg.load(result => {
        if (result.status !== 'success') {
          return this.$message.error('获取今日诗词失败')
        }
        this.message = result.data.content
        this.tagList = result.data.matchTags.map(item => {
          return {
            label: item,
            type: 'success'
          }
        })
      }, err => {
        this.$message.error(err)
      })
    }
  },
  mounted () {
    this.loadSentence()
  }
}

</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 100px;
  text-align: center;
  color: #000;
}

.title {
  font-size: 30px;
}

.lead {
  white-space: nowrap;
  margin-top: 50px;
  font-size: 40px;
  margin-bottom: 20px;
}

.tag {
  margin: 0 15px;
  padding: 0 20px;
  border-radius: 15px;
}
</style>
